<template>
 <a-layout class="layout-container">
    <Header :collapsed="collapsed" @changeCollapsed="changeCollapsed" />
    <a-layout>
      <a-layout-sider >
        <Menu />
      </a-layout-sider>
      <a-layout-content style="overflow-y: auto;">
        <Breadcrumb />
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
 import Breadcrumb from './Header/Breadcrumb/index.vue'

// 菜单折叠
const collapsed = ref<boolean>(false)
const changeCollapsed = () => {
  console.log(collapsed.value,'collapsed-11');
  
  collapsed.value = !collapsed.value
}
</script>

<style lang="less" scoped>
.layout-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .layout-sider {
    background-color: #FFFFFF !important;
    .logo {
      height: 64px;
      padding: 10px 0;
      background-color: #4CC87E;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #4CC87E !important;
      .bigLogo {
        text-align: center;
        letter-spacing: 2px;
        font-weight: bold;
        font-size: 15px;
        color: #3C3C3C;
        line-height: 20px;
        text-align: left;
      }
      .minLogo {
        text-align: center;
        color: #fff;
      }
    }
  }

  .layout-header {
    background: #fff;
    padding: 0;

    .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }
  }

  .layout-content {
    padding: 16px;
    background: #f5f7f9;
  }
}
.content{
  padding: 12px 12px;
}
:deep(.ant-layout .ant-layout-sider ){
  background: rgba(255, 255, 255, 1) !important;
}
:deep(.ant-breadcrumb){
  padding: 14px;
}
</style>
